<template>
    <div>
        <el-card class="login-form-layout">
            <el-form
                autoComplete="on"
                :model="loginForm"
                :rules="loginRules"
                ref="loginForm"
                label-position="left"
            >
                <div style="text-align: center">
                    <svg-icon
                        icon-class="login-mall"
                        style="width: 56px;height: 56px;color: #409EFF"
                    ></svg-icon>
                </div>
                <h2 class="login-title color-main">高密社区管理台</h2>
                <el-form-item prop="username">
                    <el-input
                        name="username"
                        type="text"
                        v-model="loginForm.username"
                        autoComplete="on"
                        placeholder="请输入用户名"
                    >
                        <span slot="prefix">
                            <svg-icon icon-class="user" class="color-main"></svg-icon>
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input
                        name="password"
                        :type="pwdType"
                        @keyup.enter.native="handleLogin"
                        v-model="loginForm.password"
                        autoComplete="on"
                        placeholder="请输入密码"
                    >
                        <span slot="prefix">
                            <svg-icon icon-class="password" class="color-main"></svg-icon>
                        </span>
                        <span slot="suffix" @click="showPwd">
                            <svg-icon icon-class="eye" class="color-main"></svg-icon>
                        </span>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-row>
                        <div
                            v-show="geeTestShow"
                            id="geetest-captcha"
                            class="geetest-container"
                        ></div>
                    </el-row>
                </el-form-item>
                <el-form-item style="margin-bottom: 60px;text-align: center">
                    <el-button
                        style="width: 45%"
                        type="primary"
                        :loading="loading"
                        @click.native.prevent="handleLogin"
                    >
                        登录
                    </el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <img :src="login_center_bg" class="login-center-layout" />
    </div>
</template>

<script>
import { isvalidUsername } from '@/utils/validate';
import { setSupport, getSupport, setCookie, getCookie } from '@/utils/support';
import login_center_bg from '@/assets/images/login_center_bg.png';

export default {
    name: 'login',
    data() {
        const validateUsername = (rule, value, callback) => {
            if (!isvalidUsername(value)) {
                callback(new Error('请输入正确的用户名'));
            } else {
                callback();
            }
        };
        const validatePass = (rule, value, callback) => {
            if (value.length < 3) {
                callback(new Error('密码不能小于3位'));
            } else {
                callback();
            }
        };
        return {
            geeTestShow: false,
            result: {},
            loginForm: {
                username: '',
                password: '',
                geetest_challenge: '',
                geetest_seccode: '',
                geetest_validate: ''
            },
            loginRules: {
                username: [{ required: true, trigger: 'blur', validator: validateUsername }],
                password: [{ required: true, trigger: 'blur', validator: validatePass }]
            },
            loading: false,
            pwdType: 'password',
            login_center_bg,
            dialogVisible: false,
            supportDialogVisible: false
        };
    },
    created() {
        this.loginForm.username = '13661966284';
        this.loginForm.password = 'test_12345678';
        if (
            this.loginForm.username === undefined ||
            this.loginForm.username == null ||
            this.loginForm.username === ''
        ) {
            this.loginForm.username = '13661966284';
        }
        if (this.loginForm.password === undefined || this.loginForm.password == null) {
            this.loginForm.password = '';
        }
        this.getCaptcha();
    },
    mounted() {},
    methods: {
        getCaptcha() {
            let _this = this;
            //   此url是极验官网的测试请求地址，加随机数防止缓存
            _this.$store
                .dispatch('GetCaptch')
                .then(data => {
                    // 极验第一次，请求回来的参数
                    _this.$initGeet(
                        {
                            gt: data.gt,
                            challenge: data.challenge,
                            offline: !data.success, // 用户后台检测极验服务器是否宕机
                            new_captcha: data.new_captcha === undefined ? true : data.new_captcha, // 用于宕机时表示新验证码的宕机是
                            product: 'float', // 产品形式, float, popup
                            width: '100%' //  width: "300px" 极验显示宽度
                        },
                        captchaObj => {
                            captchaObj.appendTo('#geetest-captcha');
                            captchaObj.onReady(() => {
                                _this.geeTestShow = true; // 隐藏等待提示
                            });
                            captchaObj.onSuccess(() => {
                                /**
                                 * 将极验结果赋值给result 便于在点击登录按钮时做判断 是否已经完成极验
                                 */
                                _this.result = captchaObj.getValidate();
                                _this.loginForm.geetest_challenge = _this.result.geetest_challenge;
                                _this.loginForm.geetest_seccode = _this.result.geetest_seccode;
                                _this.loginForm.geetest_validate = _this.result.geetest_validate;
                            });
                            captchaObj.onError(() => {
                                _this.$Message.error('出错啦, 请稍后重试!');
                            });
                        }
                    );
                })
                .catch(error => {
                    console.error(error);
                });
        },
        showPwd() {
            if (this.pwdType === 'password') {
                this.pwdType = '';
            } else {
                this.pwdType = 'password';
            }
        },
        handleLogin() {
            this.$refs.loginForm.validate(valid => {
                if (valid) {
                    this.loading = true;
                    this.$store
                        .dispatch('Login', this.loginForm)
                        .then(() => {
                            this.loading = false;
                            this.$router.push({ path: '/' });
                        })
                        .catch(() => {
                            this.loading = false;
                        });
                } else {
                    console.log('参数验证不合法！');
                    return false;
                }
            });
        },
        dialogConfirm() {
            this.dialogVisible = false;
            setSupport(true);
        }
    }
};
</script>

<style scoped>
.login-form-layout {
    position: absolute;
    left: 0;
    right: 0;
    width: 360px;
    margin: 140px auto;
    border-top: 10px solid #409eff;
}

.login-title {
    text-align: center;
}

.login-center-layout {
    background: #409eff;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    margin-top: 200px;
}
</style>
